<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery学习笔记</title>
    <style>
        body {
            line-height: 1.5;
        }

        p {
            color: red;
        }
    </style>
</head>

<body>
    <h4>一、jQuery概述</h4>
    <p>
        1.javastript库<br>
        （1）library，是一个 封装 好的特定 集合（方法和函数）<br>
        （2）从封装一大堆函数的角度理解，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、隐藏hide、显示show，比如获取元素等<br>
        （3）简单理解：就是JS文件，对里面原生JS进行封装，存在里面，这样可以高效的调用这些封装好的功能<br>
        常见的JS库：<br>
        Prototype、YUI、Dojo、Ext JS<br>
        移动端的 zepto <br>
        这些库都是对原生JS的封装，内部都是JS实现的<br>
    </p>
    <p>
        2.jQuery<br>
        （1）jQuery是一个快速、简洁的JS库，宗旨是“Write Less,Do More”，写的少 做的多<br>
        （2）j是js，Query是查询js<br>
        （3）jQuery就是快速方便操作DOM，里面基本都是函数（方法）<br>
        （4）jQuery封装了JS常用的功能代码，优化了DOM操作、事件处理、动画设计、Ajax交互<br>
        （5）本质：学习调用这些函数（方法）<br>
        （6）目的：加快前端人员开发速度，方便的调用和使用它，提升开发效率<br>
        （7）优点：<br>
        // 轻量级。核心才几十kb，不会影响页面加载速度<br>
        // 跨浏览器兼容。基本兼容目前所有主流<br>
        // 链式编程、隐式迭代<br>
        // 对事件、样式、动画支持，大大优化DOM操作<br>
        // 支持插件扩展开发。有丰富的第三方插件。例如：树形菜单、日期控件、轮播图等<br>
        // 免费、开源<br>
    </p>
    <p>
        3.jQuery基本使用<br>
        （1）版本：<br>
        // 1x：兼容IE678低版本浏览器，官网不再更新<br>
        // 2x：不兼容IE678低版本浏览器，官网不再更新<br>
        // 3x：不兼容IE678低版本浏览器，官网更新<br>
        （2）jQ入口函数<br>
        // 等页面DOM加载完毕再去执行JS 代码<br>
        简单写法：$(function(){...}); 推荐使用<br>
        复杂写法：$(document).ready(function(){...});<br>
    </p>
    <p>
        4.jQuery顶级对象 $<br>
        （1）$ 是 jQuery的别称，代码中都可以写，为了方便通常直接写$<br>
        （2））$ 是 jQuery的顶级对象，相对js中window。把元素利用$封装成jQuery对象，就可以调用jQuery的方法<br>
    </p>
    <h4>二、jQuery对象和DOM对象</h4>
    <p>
        1.jQuery对象和DOM对象 不能相互调用<br>
        （2）DOM对象：用原生js获取的对象就是DOM对象<br>
        （3）jQuery对象：用jQuery方式获取过来的对象就是jQuery对象。本质：通过$把DOM元素进行了包装(伪数组形式存储)<br>
        （4）jQuery对象只能使用 jQuery 方法，DOM 对象则只能使用原生的 js 属性和方法<br>
    </p>
    <p>
        2.jQuery对象和DOM对象 相互转换<br>
        因为原生JS比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用<br>
        （1）DOM对象转换为jQuery对象：<br>
        // $(DOM对象);<br>
        （2）jQuery对象转换为DOM对象：两种方法：<br>
        // $('div')[index索引号]<br>
        // $('div').get(index索引号)<br>
    </p>
    <h4>三、jQuery常用API</h4>
    <p>
        1.jQuery选择器<br>
        （1）$("选择器") 在引号内直接写CSS选择器即可<br>
        // id选择器：$("#id")<br>
        // 全选选择器：$("*")<br>
        // 类选择器：$(".class")<br>
        // 标签选择器：$("div")<br>
        // 并集选择器：$("div,p,li")<br>
        // 交集选择器：$("li.current")<br>
        // 后代选择器：$("ul li")<br>
        // 子代选择器：$("ol>li")<br>
    </p>
    <p>
        2.隐式迭代（重要）<br>
        （1）设置样式：$("div").css("属性","值");<br>
        （2）遍历内部DOM元素（伪数组形式存储）的过程<br>
        简单理解：给匹配的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们操作，方便调用<br>
    </p>
    <p>
        3.jQuery筛选选择器<br>
        （1）$("li:first"),获取第一个li元素<br>
        （2）$("li:last")，获最后一个li元素<br>
        （3）$("li:eq(索引号)")，获取li中的对应索引号的元素，索引号从0开始<br>
        （4）$("li:odd")，获取li中，索引号为奇数的元素<br>
        （5）$("li:even")，获取li中，索引号为偶数的元素<br>
    </p>
    <p>
        4.jQuery筛选方法（重点）<br>
        以下是在父、子、兄角度来查找元素，并且注意都是方法，要带括号<br>
        *（1）.parent()：查找父级，返回最近一级的父级元素（亲爸爸）<br>
        *（2）.children("selector")：类似于$(ul>li),最近一级（亲儿子）<br>
        *（3）.find("selector")：类似于$("ul li"),后代选择器<br>
        *（4）.siblings("selector")：查找兄弟节点，不包含本身自己<br>
        （5）.nextAll()：查找当前元素之后所有的同辈元素<br>
        （6）.prevAll()：查找当前元素之前所有的同辈元素<br>
        *（7）.parents():查找指定的祖先元素<br>
        （8）.hasClass("calss")：检测当前元素是否含有某个特定的类，如果有，返回true<br>
        *（9）.eq(索引号)：相当于$("li:eq(索引号)")，索引号从0开始<br>
    </p>
    <p>
        5.jQuery排他思想<br>
        类似于 $(this) 和 $(this).siblings() 的关系，自己设置，其他兄弟去除一样<br>
    </p>
    <p>
        6.jQuery样式操作<br>
        （1）操作CSS方法<br>
        可以使用css方法修改简单元素样式<br>
        样式比较多，可以操作类，修改多个样式<br>
        // 参数只写属性名，则返回属性值（带单位的字符串）<br>
        $("div").css("width");<br>
        // 参数是 属性名,属性值,逗号分隔, 是设置一组样式，属性名必须加引号，属性值也要加引号如果是数字可以不跟单位和引号<br>
        $("div").css("width",200);<br>
        // 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性名和数字可以不用加引号，复合属性才用驼峰命名法<br>
        $("div").css({width:"100px",color:"red",fontSize:18});<br>
    </p>
    <p>
        （2）设置类样式方法<br>
        作用等同于之前的classList，可以操作类样式，主要操作类里面的参数不要加点<br>
        // 添加类<br>
        $("diiv").addClass("类名")<br>
        // 删除类<br>
        $("diiv").removeClass("类名")<br>
        // 切换类<br>
        $("diiv").toggleClass("类名")<br>
    </p>
    <p>
        （3）类操作与className区别<br>
        原生js中className会覆盖元素原先里面的类名<br>
        jQuery里面类操作知识对指定类进行操作，不影响原先的类名，相当于在之前类名后面追加一个类名<br>

    </p>
    <p>
        7.jQuery效果<br>
        封装了很多动画效果，常见的如下：<br>
        （1）显示隐藏：<br>
        // show("speed","easing",fn)<br>
        // hide("speed"",easing",fn)<br>
        // toggle("speed","easing",fn)<br>
        // 参数可以省略，无动画显示<br>
        speed：三种速度之一的字符串slow、normal、fast 或 表示动画时长的毫秒数(如1000)；<br>
        easing:用来指定切换效果，默认是 swing，可用参数 linear；<br>
        fn：回调函数，在动画完成时执行的函数，每个元素执行一次<br>
        一般情况下 因为一般都是默认动画 太丑了 都不加参数 直接隐藏就可以了<br>
    </p>
    <p>
        （2）滑动<br>
        // 参数可以省略，无动画显示<br>
        // slideDown("speed","easing",fn)<br>
        // slideUp("speed","easing",fn)<br>
        // slideToggle("speed","easing",fn)<br>
        speed：三种速度之一的字符串slow、normal、fast 或 表示动画时长的毫秒数(如1000)；<br>
        easing:用来指定切换效果，默认是 swing，可用参数 linear；<br>
        fn：回调函数，在动画完成时执行的函数，每个元素执行一次<br>
    </p>
    <p>
        （3）事件切换<br>
        // hover(over(经过函数),out（离开的函数）)：复合写法<br>
        // over：鼠标移到元素上要触发的 函数（相当于mouseenter），此参数可以省略，<br>
        // out：鼠标离开元素要要触发的 函数（相当于mouseleave）<br>
        // 注意：如果只写一个函数 那么鼠标经过和鼠标离开都会触发这个函数，相当于执行slideToggle()切换<br>
    </p>
    <p>
        （4）动画队列及停止排队方法<br>
        // 动画队列<br>
        动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行<br>
        // 停止排队<br>
        stop()：用于停止动画<br>
        注意：stop写到动画或者效果的前面，相当于停止结束上一次的动画<br>
        例如：stop().slideToggle()<br>
    </p>
    <p>
        （5）淡入淡出<br>
        // fadeIn("speed","easing",fn)<br>
        // fadeOut("speed","easing",fn)<br>
        // fadeToggle("speed","easing",fn)<br>
        // fadeTo("speed",opacity,"easing",fn) opacity:透明度必须写，取值0~1之间 speed也必须写<br>
        speed：三种速度之一的字符串slow、normal、fast 或 表示动画时长的毫秒数(如1000)；<br>
        easing:用来指定切换效果，默认是 swing，可用参数 linear；<br>
        fn：回调函数，在动画完成时执行的函数，每个元素执行一次<br>
    </p>
    <p>
        （6）自定义动画<br>
        // animate({params},"speed","easing",fn)<br>
        params：想要更改的样式属性，以 对象形式传递 ，必须写。属性名可以不带引号，复合属性名要用驼峰命名法，其余参数都可省略<br>
        speed：三种速度之一的字符串slow、normal、fast 或 表示动画时长的毫秒数(如1000)；<br>
        easing:用来指定切换效果，默认是 swing，可用参数 linear；<br>
        fn：回调函数，在动画完成时执行的函数，每个元素执行一次<br>
    </p>
    <p>
        8.jQuery属性操作<br>
        （1）prop()<br>
        设置或获取元素固有的属性值,就是元素本身自带的属性，如:a标签里的href<br>
        // 获取语法：element.prop("属性名")<br>
        // 设置语法：element.prop("属性名","属性值")<br>
        （2）attr()<br>
        设置或获取元素自定义的属性值,也可获取H5自定义属性<br>
        // 获取语法：element.attr("属性名")，类似原生js中getArrtibute()<br>
        // 设置语法：element.attr("属性名","属性值")，类似原生js中setArrtibute()<br>
        （3）data()<br>
        数据缓存，可以在指定元素上存取数据，并不会修改DOM元素结构，页面刷新，之前存放的数据被移除<br>
        // 附加数据语法：element.data("属性名","属性值")<br>
        // 获取数据语法：element.data("属性名")<br>
        // 这个方法获取data-index h5自定义属性 不用写data- 并且返回的数字型的<br>
    </p>
    <p>
        9.jQuery内容文本值<br>
        主要针对元素的 内容 还有 表单的值 操作<br>
        （1）普通元素内容 html()（相当于innerHTML）<br>
        // html("内容"), 为空，获取元素内容;有内容，则设置元素内容<br>
        （2）普通元素文本内容 text()（相当于innerText）<br>
        // 获取设置元素文本内容 text("文本"),为空，获取元素文本;有内容，则设置元素文本<br>
        （3）表单的值 val()（相当于原生value）<br>
        // 获取设置表单值 val("value值"),为空，获取表单的value值;有内容，则设置元素value值<br>
    </p>
    <p>
        10.jQuer元素操作<br>
        主要是遍历、创建、添加、删除元素操作<br>
    </p>
    <p>
        （1）遍历元素<br>
        jQuery隐式迭代是对同一类元素做了同样的操作，如果要给同一类元素做不同操作，就要用到遍历<br>
        ** // each() 方法遍历元素，语法：<br>
        $("div").each(function(index（索引号）,domEle（dom元素对象）){(xxx;)});<br>
        each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个<br>
        里面的回调含糊有2个参数：<br>
        index是每个元素的索引号，回调函数第一个参数一定是索引号 可以自由指定索引号名称<br>
        domEle是每个 DOM元素对象，不是jQuery对象<br>
        所以要想使用jQuery对象，需要给这个dom元素转换为jQuery对像$(domEle)<br>
    </p>
    <p>
        // $.each() 方法遍历对象 语法：<br>
        $.each(object（数组或对象）,function(index（索引号）,element（遍历内容）){xxx;});<br>
        $.each()方法可以用于遍历任何对象。主要用于数据处理，比如数组，对象<br>
        里面的函数有2个参数：index是每个元素的索引号；element遍历内容<br>
    </p>
    <p>
        （2）创建、添加、删除元素<br>
        // 创建元素<br>
        $("div /div"): 里面加单/双标签，动态的创建了一个div标签<br>
        // 添加元素：<br>
        // 内部添加：生成之后是父子关系<br>
        element.append("内容")，内部添加并放到内容的最后面，类似原生appendChild<br>
        element.prepend("内容")，内部添加并放到内容的最前面<br>
        // 外部添加：生成之后是兄弟关系<br>
        element.after("内容")，把内容放在目标元素最后面<br>
        element.before("内容")，把内容放在目标元素最前面<br>
        // 删除元素：<br>
        element.remove()：删除匹配的元素（本身），“自杀”<br>
        element.empty()：删除匹配的元素集合中所有的子节点，“杀子”<br>
        element.html("")：清空匹配的元素内容，“杀子”<br>

    </p>
    <p>
        11.jQuery尺寸、位置操作<br>
        （1）jQuery尺寸，语法：<br>
        // width()/height()：取得匹配元素宽度和高度值 只算width/height<br>
        // innerWidth()/innerHeight()：取得匹配元素宽度和高度值（包括padding）<br>
        // outerWidth()/outerHeight()：取得匹配元素宽度和高度值（包括padding、border）<br>
        // outerWidth(true)/outerHeight(true)：取得匹配元素宽度和高度值（包含padding、border、margin）<br>
        参数为空，则获取相应数值，返回是数字型<br>
        如果参数为数字，则是修改相应值<br>
        参数可以不用写单位<br>
    </p>
    <p>
        （2）jQuery位置，语法：<br>
        // offset(),设置或获取元素偏移，相当于文档的偏移坐标，跟父级没关系<br>
        offset.top：用于获取距离文档顶部的距离<br>
        offset().left：用于获取距离文档左侧的距离<br>
        可设置元素的偏移：如offset({top:10,left:10}); 对象格式设置<br>
        // position() 获取距离 带有定位父级位置（偏移），如果没有带有定位的父级，则以文档为准<br>
        这个方法只能获取，不可设置偏移<br>
        （3）scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧<br>
    </p>
    <p>
        12.jQuery事件<br>
        （1）事件注册<br>
        // 单个事件注册<br>
        语法：element.事件(function(){});<br>
        （2）事件处理on<br>
        element.on(events,[selector],fn);<br>
        events：一个或多个用空格隔开的事件类型<br>
        select：元素的子元素选择器（可以省略）<br>
        fn：回调函数，即绑定在元素身上的监听函数<br>
        // 优势1：绑定多个事件，多个处理事件程序或者处理相同事件<br>
        // 优势2：可以事件委派操作。把原理加给子元素身上的实际绑定在父元素身上，就是把事件委派给父元素<br>
        **// 优势3：动态创建元素，click()没有办法绑定事件，on()可以动态生成元素绑定事件<br>
    </p>
    <p>
        （3）解绑事件 off()<br>
        可以移除通过on()方法添加的事件处理程序<br>
        // $("div").off()：括号内为空，解除所有事件<br>
        // $("div").off("click")： 解除了点击事件<br>
        // $("ul").off("click", "li")： 解除事件委托<br>
        （4）如果事件只想触发一次，可以使用one()来绑定事件<br>
    </p>
    <p>
        （4）自动触发事件 trigger()<br>
        如轮播图自动播放功能和点击左右按钮一致，可以利用定时器自动触发按钮点击事件，不必鼠标点击触发<br>
        // element.click()：简写形式<br>
        // element.trigger("事件")：自动触发模式,以上都会会触发元素的默认行为,如获取焦点 光标自动闪烁<br>
        // element.triggerHandler("事件")：自动触发模式，但不会触发元素的默认行为,如获取焦点 光标不自动闪烁<br>
    </p>
    <p>
        13.jQuery事件对象 event/e<br>
        （1）event事件对象： element.on(events,[selector],function(event/e){});<br>
        阻止默认行为：event.prevenDefault() 或者return false<br>
        阻止冒泡：event.stopPropagation()<br>
    </p>
    <p>
        14.jQuery其他方法<br>
        （1）jQuery对象拷贝<br>
        把某个对象拷贝（合并）给另一个对象使用，此时可以使用$.extend()<br>
        语法：$.extend([deep],target,obj1,[objN])<br>
        // deep：true深拷贝，false浅拷贝默认<br>
        浅拷贝：浅拷贝把原来对象里面的复杂数据类型 地址 拷贝给目标对象<br>
        深拷贝：前面加true，深拷贝把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起<br>
        // target：拷贝的目标对象<br>
        // object1：待拷贝到第一个对象的对象<br>
        // objectN：待拷贝到其他若干对象的对象<br>
    </p>
    <p>
        15.jQuery多库共存<br>
        问题描述：jQuery使用$作为标示符，随着jQuery的流行，其他js库也会会用此标示符，这样会引起冲突<br>
        （1）解决方案：如果$符号冲突 就用jQuery<br>
        （2）解决方案：让jQuery 释放$ 控制权，让用户自己决定,var xx =$.noConflict();<br>
    </p>
    <h4>四.jQuery插件</h4>
    <p>
        1.插件使用：<br>
        注意：这些插件依赖于jQuery来完成，所以要先引入jQuery文件<br>
        常用网站：<br>
        jQuery插件库：www.jq22.com<br>
        jQuery之家：www.htmleaf.com（推荐）<br>
    </p>
    <p>
        2.图片懒加载<br>
        图片使用延迟加载在可提高网页下载速度，能帮助减轻服务器负载<br>
        当页面滑动到可视区域，再显示图片<br>
        EasyLazyload插件必须写在最下面<br>
    </p>
    <p>
        3.全屏滚动插件<br>
        fullpage.js<br>
        github：github.com/alvarotrigo/fullpage.js<br>
        中文翻译网：www.dowebok.com/demo/2014/77/<br>
    </p>
    <p>
        bootstrap插件<br>
        父盒子一定有class=“container”
    </p>
</body>

</html>